<template>
  <div>
    <el-button @click="openDialog">添加</el-button>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
      <el-table-column
        prop="first_cateid"
        label="一级分类"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="second_cateid"
        label="二级分类"
        align="center"
      ></el-table-column>
      <el-table-column prop="goodsname" label="商品名称" align="center"></el-table-column>
      <el-table-column label="商品图片" align="center">
        <template slot-scope="scope">
          <img width="100" height="100"    :src="$host + scope.row.img" />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="销售价格" align="center"></el-table-column>
      <el-table-column
        prop="market_price"
        label="市场价格"
        align="center"
      ></el-table-column>
      <el-table-column prop="isnew" label="是否新品" align="center">
        <template slot-scope="scope"
          ><el-switch
            v-model="scope.row.isnew"
            @change="switchChange(scope.row.id)"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="ishot" label="是否热卖" align="center">
        <template slot-scope="scope"
          ><el-switch
            v-model="scope.row.ishot"
            @change="switchChange(scope.row.id)"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch> </template
      ></el-table-column>
      <el-table-column prop="ststus" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
          <el-tag v-else>禁用</el-tag>
        </template></el-table-column
      >
      <el-table-column prop="goodsname" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            circle
            @click="edit(scope.row)"
            icon="el-icon-edit"
            size="mini"
          ></el-button>

          <el-button
            type="danger"
            @click="handleDelete(scope.row)"
            icon="el-icon-delete"
            size="mini"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="5"
      layout="prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-dialog :title="popType + '分类'" :visible.sync="dialogVisible" width="50%">
      <goods-info></goods-info>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import goodsInfo from "./index1";
import { getTotalGoodsNumber, getGoodsList, makeGoodsEdit } from "../../request";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: 0,
      isnew: "",
      ishot: "",
      dialogVisible: false,
      // 弹窗类型：新增或者修改
      popType: "新增",
    };
  },
  components: {
    goodsInfo,
  },
  created() {
    this.getTotalGoods();
  },
  methods: {
    //   获取商品总条数
    async getTotalGoods() {
      let res = await getTotalGoodsNumber();
      this.total = res.data.list[0].total;

      let res1 = await getGoodsList({ page: this.currentPage, size: 5 });

      this.tableData = res1.data.list;
    },

    handleCurrentChange(val) {
      val;
    },

    // 开关
    async switchChange(obj) {
      // obj是修改后商品的全部信息，包含id和ishot
      let ishot = obj.ishot ? 1 : 0;
      // 需要通过formData类型传值
      let formData = new FormData();
      formData.append("id", obj.id);
      formData.append("ishot", ishot);
      // 因为接口可以接受图片，所以用formData传值
      let res = await makeGoodsEdit(formData);
      console.log(res);
    },
    // 新增弹窗
    openDialog() {
      this.popType = "新增";
      this.transData = {
        pid: 0,
        img: "",
        catename: "",
        status: 1,
      };
      this.dialogVisible = true;
    },
  },
};
</script>
<style lang=""></style>
